<template>
  <div class="page-wrap">
    <pk-scroll :loading="loading" :isEnd="isEnd" @scrolltolower="scrolltolower">
      <div class="page-wrap-content pt-24">
        <div class="page-wrap-itembox">
          <div class="page-wrap-item" v-for="(item,index) in list" :key="index">
            <pk-good :data="item" @onCall="onCall(item)"></pk-good>
          </div> 
        </div>
      </div> 
    </pk-scroll> 
    <pk-qrcode :data="curData" scene="B" :channelId="curData.agent_id" v-if="linkShow" @onClose="linkShow=false"></pk-qrcode>
    <!-- <pk-dialog title="聊天室链接" :footer="false" v-if="linkShow" @onClose="linkShow=false">
      <div class="flex-column align-items-center justify-center page-wrap-link">
        <div class="page-wrap-linkpath">
          {{ linkPath }}
        </div>
        <div class="mt-24">
          <el-button type="primary" @click="Handlerclip" style="width: 340px;">复制链接</el-button>
        </div>
      </div>
    </pk-dialog> -->
  </div>
</template>

<script setup>
  import { ref, onMounted  } from 'vue'
  import { agentGetList, generateChatLink, generateSession } from '@/api/api'
  import pkHeader from '@/components/header/header.vue'
  import pkGood from '@/components/pkui/pkgood/pkgood.vue'
  import pkScroll from '@/components/pkui/pkscroll/pkscroll.vue'
  import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
  import pkQrcode from '@/components/pkui/pkqrcode/pkqrcode.vue'
  import { useSideStore } from '@/store/state'
  import { ElMessage } from 'element-plus'
  import { isMobile } from '@/utils/utils'
  import { getToken, setKeyItem, getKeyUserInfo} from '@/utils/auth'
  const counterStore = useSideStore()
  const list = ref([])
  const page = ref(1)
  const total = ref(1)
  const linkShow = ref(false)
  const loading = ref(false)
  const isEnd = ref(false)
  const curData = ref({}) 
  const pageSize = ref(15)
  const linkPath = ref("")
  const getList = () => {
    if (isEnd.value) {
      return
    }
    loading.value = true
    agentGetList({
      page: page.value
    }).then(res => {
      setTimeout(() => {
        loading.value = false
        if (res.data.list.length == 0) {
          isEnd.value = true
        } 
        if(res.data.list.length > 0){
          list.value = list.value.concat(res.data.list)
        } 
      }, 500)
    }).catch(() => {
      loading.value = false
    })
  } 

  const onCall = (e) => {
    if (!getToken()) {
      counterStore.SETLOGINSHOW(true)
      return
    } 
    curData.value = e
    linkShow.value = true 
  }

  const Handlerclip = async() => {
    try {
      await navigator.clipboard.writeText(linkPath.value);
      ElMessage('复制成功')
    } catch (err) {
      ElMessage('复制失败')
    }
  }

  const scrolltolower = () => {
    page.value = page.value + 1
    getList()
  }

  onMounted(() => {
    list.value = [] 
    getList() 
    if (getToken()) {
      counterStore.SETTOKEN(getToken())
    } 
  })
</script>
<style lang="scss" scoped>
  .page-wrap{
    padding-top: 52px;
    height: calc(100vh - 52px);
    overflow: hidden;
    &-menu{
      background: #fff;
    }
    &-content{
      margin: 0 auto;
      min-height: 100%;
      width: 996px;
    }
    &-item{
      width: 240px;
      margin-right: 12px;
      margin-bottom: 12px;
    }
    &-item:nth-child(4n){
      margin-right: 0px!important;
    }
    &-itembox{
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    &-link{

    }
    &-linkpath{
      box-shadow: 0px 0px 0px 1px rgba(140, 140, 140, 0.2);
      border-radius: 8px;
      background: #f4f2ee;
      min-height: 40px;
      width: 340px;
      padding: 12px;
    }
  }
</style>
